<template>
	<view>
		<view class="user_head">
			<view class="head_backround">
				<image :src="userinfo.backgroundUrl"  mode="scaleToFill" />
			</view>
			<view class="head_info">
				<view class="user_inforow u-f-ac">
					<image class="user_img" :src="userinfo.avatarUrl" mode="widthFix" />
					<text >{{userinfo.nickname}}</text>
					<image class="user_gender" :src="userinfo.gender==0?'../../../static/icon/gender1.png':'../../../static/icon/gender2.png'" mode="widthFix" />
				</view>
				<view class="user_signature">
					{{userinfo.signature}}
				</view>
			</view>
			<view class="head_tabs">
				<view class="head_tabs_background"></view>
				<view class="tabs u-f-ajc">
					<text >{{userinfo.eventCount}}</text>
					动态
				</view>
				<view class="tabs among u-f-ajc" >
					<text >{{userinfo.follows}}</text>
					关注
				</view>
				<view class="tabs u-f-ajc">
					<text >{{userinfo.followeds}}</text>
					粉丝
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		props:{
			userinfo:Object,
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less" scoped>
	.user_head{
		width: 100%;
		height: 600upx;
		overflow: hidden;
		position: relative;
		color: #ffffff;
		.head_backround{
			width: 100%;
			position: absolute;
			top: -100upx;
			z-index: 0;
			image{
				width: 750upx;
				height: 700upx;
			}
		}
		.head_info{
			position: absolute;
			z-index: 1;
			bottom: 120upx;
			font-weight: 550;
			width: 100%;
			.user_inforow{
				padding-left: 80upx;
				padding-bottom: 15upx;
				.user_img{
					width: 70upx;
					border-radius: 50%;
				}
				text{
					font-size: 26upx;
					padding:0 5upx 0 10upx;
				}
				.user_gender{
					width: 30upx;
					border-radius: 50%;
				}
			}
			.user_signature{
				padding-left: 80upx;
				font-size: 28upx;
			}
		}
		.head_tabs{
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 80upx;
			display: flex; 
			.head_tabs_background{
				position: absolute;
				z-index: 0;
				top:0;
				width: 100%;
				height: 80upx;
				background-color: #000000;
				opacity: 0.7;
			}
			.tabs{
				z-index: 1;
				flex-direction: column;
				flex: 1;
				font-size: 24upx;
			}
			.among{
				border-right: 1upx solid #6c7a78;
				border-left: 1upx solid #6c7a78;
			}
	
		}
	}
</style>
